<template>
  <div class='container'>
    <el-card>

      <CardHeader>
        <!-- 关键字搜索 S-->
        <template #left>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword" placeholder="根据编号搜索"></el-input>
            </el-form-item>
          </el-form>
        </template>
        <template #right>
          <div>
            <el-button @click="onEmpty" size="small">清除</el-button>
            <el-button @click="onSearch" type="primary" size="small">搜索</el-button>
          </div>
        </template>
        <!-- 关键字搜索 E-->
      </CardHeader>

        <el-alert
          :title="'数据一共 '+counts+' 条'"
          type="info"
          :closable="false"
          show-icon>
        </el-alert>

      <!-- 答题数据 table表格 S -->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          >
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          >
          <template slot-scope="{row}">
            {{typeOfQuestions(row.questionType)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="questionIDs"
          label="题目编号"
          >
          <template slot-scope="{ row }">
            <el-button
            class="textButton"
            type="text"
            v-for="item in row.questionIDs"
            :key="item.value"
            @click="handleShowDialog(item.id)"
            >
            {{ item.number }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          >
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)"
          >
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)"
          >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人"
          >
        </el-table-column>
        <el-table-column label="操作" width="80px">
          <template slot-scope="{ row }">
              <!-- 删除题组 -->
            <el-button
              size="small"
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              @click="onDel(row)"
              />
          </template>
        </el-table-column>
      </el-table>
      <!-- 答题数据 table表格 E -->

      <!-- 分页器组件 S -->
      <Pagination
      :counts="counts"
      :page="form"
      @changePageSize="changePageSize"
      @changeCurrentPage="changeCurrentPage"
      ></Pagination>
      <!-- 分页器组件 E -->
    </el-card>
    <!-- 试题预览弹框 S -->
    <Descriptions
    :isShowDesc="isShowDesc"
    :DescInfo="DescInfo"
    @onClose="isShowDesc=false"
    ></Descriptions>
    <!-- 试题预览弹框 E -->
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import { questionType } from '@/api/hmmm/constants.js'

export default {
  data () {
    return {
      form: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      tableData: [],
      isShowDesc: false,
      DescInfo: {},
      counts: 0
    }
  },

  computed: {

  },

  created () {
    this.loadRandoms()
  },

  methods: {
    typeOfQuestions (type) {
      return questionType.find(item => item.value === type - 0).label
    },
    // 清空输入框
    onEmpty () {
      this.form = {
        page: 1,
        pagesize: 10,
        keyword: ''
      }
      this.loadRandoms()
    },
    // 点击搜索
    onSearch () {
      this.loadRandoms()
    },
    // 加载组题列表
    async loadRandoms () {
      const { data } = await randoms(this.form)
      console.log(data)
      this.tableData = data.items
      this.counts = data.counts
    },
    // 点击删除按钮
    onDel (row) {
      this.$confirm('此操作将永久删除该列表, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms({ id: row.id })
        this.$message({
          type: 'success',
          message: '删除列表成功!'
        })
        this.loadRandoms()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击文字按钮
    async handleShowDialog (id) {
      const { data } = await detail({ id })
      this.isShowDesc = true
      this.DescInfo = data
    },
    // 改变分页器尺寸
    changePageSize (val) {
      this.form.pagesize = val
      this.loadRandoms()
    },
    changeCurrentPage (val) {
      this.form.page = val
      this.loadRandoms()
    }
  }
}
</script>

<style scoped lang='less'>
.container {
    .el-input {
    width: 335px;
    height: 32px;
  }
  .cell>.textButton{
    padding: unset;
    margin: unset;
  }
}

</style>
